<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3背景渐变实例</title>
<head>
    <style>
        #grad{
            background: black;
            /* 第一种：-webkit-linear-gradient()，统配各种浏览器*/
            background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,255,255,1));
            /* 第二种：-o-linear-gradient，Opera浏览器*/
            /*background: -o-linear-gradient(right,rgba(255,,0,0),rgba(0,0,0,1));*/
            /* 第三种：-moz-linear-gradient，火狐浏览器*/
            /*background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(0,0,0,1));*/
            /* 第四种：linear-gradient()，统配各种浏览器*/
            /*background: linear-gradient(to left,rgba(255,0,0,0),rgba(0,0,0,1));*/
        }
    </style>
</head>
<body id="grad">
<!--     第一种属性：

-webkit-linear-gradient()表示线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向。 
    本例中其参数表示从左边开始的线性渐变。起点是透明，慢慢过渡到黑色。
-->
<!-- 第四种属性：

linear-gradient()也是表示线性渐变，不过是标准的语法。

本例中其参数表示从左到右开始线性渐变，起点是黑色，慢慢过渡到透明。 

那么上述第二第三种方法，是不建议使用的
-->
</body>
</html>